<template>
	<div class="planList_box">
		<SiderBav :nav="planNav"></SiderBav>
		<div class="planList_content">
				  <div class="btn_box">
					   <el-select v-model="planStatus" placeholder="请选择" style="height: 32px;">
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<el-select v-model="planType" placeholder="请选择" style="height: 32px;">
							<el-option
								v-for="item in planTypeList"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<el-select v-model="payType" placeholder="请选择" style="height: 32px;">
							<el-option
								v-for="item in payTypeList"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<div style="float:right;width:200px;height:32px;margin-right:32px;">
							<el-input v-model="searchPlanName" placeholder="计划名"></el-input>
						</div>	
				</div>
				<!-- <div v-loading.fullscreen.lock="loading"  v-if="loading" style="margin-top:100px"></div> -->
				<div class="empty" v-show="dataList.length<=0 && !loading">
					暂无数据
				</div>
				<table  class="list-table" v-show="dataList.length>0">
					<tr style="height: 60px; background: #fafafa;">
						<template >
							<th><input type="checkbox" v-model="checkListAll" style="margin-right:10px;" name="" id="">选择</th>
							<th>状态</th>
							<th>计划信息</th>
							<th>投放时间</th>
							<th>日预算</th>
							<th>
								上小时消耗
								<a href="javascript:;" :class="{'sortClass':sortType=='last_charge-asc'}" 
								@click="sortfn('last_charge-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='last_charge-desc'}" @click="sortfn('last_charge-desc')"> 
									<i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								消耗 
								<a href="javascript:;" :class="{'sortClass':sortType=='charge-asc'}"  @click="sortfn('charge-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='charge-desc'}" @click="sortfn('charge-desc')"> <i class="el-icon-sort-down	"></i> </a>
							</th>
							<th>
								消耗占比
								
								<a href="javascript:;" :class="{'sortClass':sortType=='percent-asc'}" 
								@click="sortfn('percent-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='percent-desc'}" @click="sortfn('percent-desc')"> 
									<i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								展现
								<a href="javascript:;" :class="{'sortClass':sortType=='ad_pv-asc'}" @click="sortfn('ad_pv-asc')"> 
									<i class="el-icon-sort-up"></i>
									</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ad_pv-desc'}" @click="sortfn('ad_pv-desc')">
									 <i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								点击
								<a href="javascript:;" :class="{'sortClass':sortType=='click-asc'}" @click="sortfn('click-asc')"> 
									<i class="el-icon-sort-up"></i>
									</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='click-desc'}" @click="sortfn('click-desc')"> 
									<i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								CTR
								<a href="javascript:;" :class="{'sortClass':sortType=='ctr-asc'}" @click="sortfn('ctr-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ctr-desc'}" @click="sortfn('ctr-desc')"> 
									<i class="el-icon-sort-down	"></i>
								</a>
							</th>
							<th>
								CPM
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpm-asc'}" @click="sortfn('ecpm-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpm-desc'}"  @click="sortfn('ecpm-desc')"> <i class="el-icon-sort-down"></i> </a>
							</th>
							<th>
								CPC
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpc-asc'}" @click="sortfn('ecpc-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpc-desc'}" @click="sortfn('ecpc-desc')"> <i class="el-icon-sort-down	"></i> </a>	
							</th>
						</template>
					</tr>
					<template v-for="(o) in dataList"  >
						<tr @mouseover="trhoverFn(o)"    :class="{'trbg':o.hover}" style="border-bottom: 1px solid #ebebeb;">
							<template >
									<td>
										<input type="checkbox" v-model="checkList" :value="o.id"   style="margin-right:3em;" name="" id="">
									</td>
									<td>
										{{ o.online_status | planStatus }}
									</td>
									<td>
										<span v-if="o.life_cycle=='草稿'" class="grey-hollow-icon">草稿</span>{{ o.name }}
									</td>
									<td>	
										起：{{ o.start_time }}<br/>
										止：{{ o.end_time }}
									</td>
									<td>
										<img v-if="o.type==8" title=" 按图片单次展现出价，注：点击不另外计费。" class="zs_iconfon" src="../../imagin/c.jpg" alt="">
										<img v-if="o.type==2" title="按图片千次展现出价，注：点击不另外计费。" class="zs_iconfon" src="../../imagin/m.jpg" alt="">
										{{ o.day_budget/100 }}
									</td>
									<td>
										{{ o.last_charge?(o.last_charge):0 }}
									</td>
									<td>{{ o.charge?(o.charge):0 }} </td>
									<td>{{ o.percent?(percent):0 }}</td>
									<td>{{ o.ad_pv?(o.ad_pv):0 }} </td>
									<td>{{ o.click?(o.click):0 }}</td>
									<td>{{ o.ctr?(o.ctr):0 }}</td>
									<td>{{ o.ecpm?(o.ecpm):0 }}</td>
									<td>{{ o.ecpc?(o.ecpc):0 }}</td>
							</template>
						</tr>
						<tr :class="{'trBtnbg':o.hover}"     style="border-bottom: 1px solid #ebebeb">
							<td colspan="13" v-show="o.hover" style="text-align: left;height: 40px; padding-left: 50px;">
								<el-button @click="toCrowd(o)"  size="mini" plain>定向</el-button>
								<el-button @click="toAdgroup(o)"  size="mini" plain>单元</el-button>
								<!-- <el-button  size="mini"  @click="toDetail(o)" plain>详情</el-button> -->
								<!--<el-button  size="mini" plain>复制</el-button>-->
								<!-- <el-button  size="mini" plain @click="delet(o)">移除</el-button> -->
								<!-- <el-button  size="mini" plain>置顶</el-button> -->
							<!--	<el-button  size="mini" plain>报表</el-button>
								<el-button  size="mini" plain>加入对比</el-button>-->
							</td>
						</tr>
					</template>
				</table>
				<el-pagination  v-show="total_count>19 && !loading"
					:page-size="20"
					:pager-count="11"
					layout="prev, pager, next"
					:total="total_count"
					@current-change="pagechange"
					:current-page="currentPage"
					>
				</el-pagination>
		</div>
	</div>
</template>
<style src="./style.css" scoped lang="less"></style>
<script src="./script.js"></script>



